<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<%@ include file="/common/dxp/include/common-base.jsp"%>
	<title>服务提供关系图</title>
</head>
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

	<!-- top start -->
	<%@include file="/common/dxp/top.jsp" %>
	<!-- top end -->

	<!-- left start -->
	<%@include file="/common/dxp/left.jsp" %>
	<!-- left end-->

	<div class="content-wrapper">
		<section class="content">
			<div class="row">
				<div class="col-lg-12">
					<div class="box box-solid">
						<div class="box-header">
<%--							<h3 class="box-title"><i class="fa fa-sitemap"></i><span>平台注册系统与接口关系图</span></h3>--%>
							<div class="box-tools pull-right">
								<span class="pl10">显示系统提供方&nbsp;<input type="checkbox" onclick="echarts_sysInterfaceRef()" id="sys_interface_ref_checked_unit" ></span>
								<span class="pl10">展开所有接口&nbsp;<input type="checkbox" checked="checked" onclick="echarts_sysInterfaceRef()" id="sys_interface_ref_checked_show_3" ></span>
<%--								<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>--%>
							</div>
						</div>
						<div class="box-body">
							<div id="echarts_sys_interface_ref" style="height: 600px;"></div>
						</div>
					</div>
				</div>
			</div>
			<div style="display: none">
				<select id="dxpUnit" class="form-control  clean" disabled
						data-temp-obj="dxSysReg.userOwner" data-dict-code="dictItemList" data-dict-cate="dxpUnit" data-type-tag="select" data-def=""
						data-name="dxInterfaceReg.userOwner" >
				</select>
			</div>
			<script>
				var clickMenu= 'jkgl-sys-int-ref';
				var userId  = "${loginUser.userId}",userEname="${loginUser.userEname}",orgId  = "${loginUser.orgId}";
				var dictListMap = DictUtil.initDictAndDymic();
				$(function () {
					echarts_sysInterfaceRef();
				});
				//调试线条样式
				function addChartsTreeClassToLine(array,colorVal) {
					var colorArray = ['#37a2da','#32c5e9','#67e0e3','#9fe6b8',
						'#ffdb5c','#ff9f7f','#fb7293','#fb7293',
						'#e062ae','#e690d1','#e7bcf3','#9d96f5',
						'#8378ea','#96bfff'];
					array.forEach(function (items,i) {
						if(strUtil.isNull(colorVal)){
							items.lineStyle={color:colorArray[(i%colorArray.length)]};
						}else{
							items.lineStyle={color:colorVal};
						}
						if(items.children){
							addChartsTreeClassToLine(items.children,items.lineStyle.color);
						}
					});
				}
				function echarts_sysInterfaceRef() {
					var index_load = layer.load(1, {shade: false});
					var isShowUnit = $("#sys_interface_ref_checked_unit").is(":checked");
					var showAll = $("#sys_interface_ref_checked_show_3").is(":checked");
					$.ajax({
						type: 'get',
						url: common_list_url,
						data: {'pageName': 'dx-data-statistics-type', 'formName': 'statisticsForm', 'statType': '1'},
						dataType: 'json',
						success: function (myData) {
							console.log('res1', myData);
							if ("T" == myData.flag) {
								var definitialTreeDepthVal = showAll?5:(isShowUnit?2:1);
								// definitialTreeDepthVal=(myData.total>10)?2:3;
								var unitsMap = dictListMap["dxpUnit"];
								var data1 ={name:"本平台",children:[]};
								if(isShowUnit){
									//补充单位层级
									for(var ukey in unitsMap){
										var unitObj = {name:unitsMap[ukey],children:[]};
										myData.rows.forEach(function (items,i) {
											if(ukey==items.unit){
												unitObj.children.push(items);
											}
										});
										// unitObj.value=unitObj.children.length;
										data1.children.push(unitObj);
									}
								}else{
									data1.children=myData.rows;
								}

								//处理线条样式
								addChartsTreeClassToLine(data1.children,'');

								console.log('res2', data1);
								var container = document.getElementById('echarts_sys_interface_ref');
								var myChart = echarts.init(container);
								var option = {
									title : {
										text: '服务提供关系图（服务提供方所注册的系统与服务接口关系）',
										textStyle: {
											align: 'center',
											fontWeight: 'normal',
											fontSize: 16,
											// color: '#F1F1F3'
										}
									},
									toolbox: {
										feature: {
											saveAsImage: {show: true}
										}
									},
									grid: { // 控制图的大小，调整下面这些值就可以，
										left: '0%',
										right: '1%',
										top:'0%'
										// y: 20 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
									},
									tooltip: {
										show:true,
										trigger: 'item',
										triggerOn: 'mousemove',
										formatter: function(params, ticket, callback) {
											if(params.value!=undefined){
												return params.name + "：" + params.value+"个接口";
											}else{
												return params.name;
											}
										}
									},
									series:[
										{
											// layout: 'radial',//布局方式：及区分是一中心扩散开(radial=径向），还是树形（default）
											type: 'tree',
											data: [data1],
											top: '5%',
											left: '15%',
											bottom: '2%',
											right: '25%',
											symbolSize: 7,   //标记的大小，就是那个小圆圈，默认7
											label: {
												normal: {
													position: 'left',
													// // color:'#fff',
													// verticalAlign: 'middle',
													// rotate: -90,//标签旋转。从 -90 度到 90 度。正值是逆时针。
													// // color:'#fff',
													// // verticalAlign: 'middle',//文字垂直对齐方式，默认自动。
													// // fontSize: 12,//文字的字体大小
													align: 'right',
													formatter: function(params) {
														if(params.value!=undefined){
															return params.name + "（" + params.value+"个）";
														}else{
															return params.name;
														}
													}
												}
											},
											leaves: {//无子节点的样式
												label: {
													normal: {
														position: 'right',
														// color:'red',
														verticalAlign: 'center',
														align: 'left'
													}
												}
											},
											initialTreeDepth:definitialTreeDepthVal,//默认：2，树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层，... ，直到叶子节点
											expandAndCollapse: true,

											animationDuration: 150,
											animationDurationUpdate: 750

										},
									]
								};
								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);

								//参考：blog.csdn.net/u014007680/article/details/80074191，ECharts树节点过多时，不想要缩放，调整容器高度（宽度）
								var allNode=0;
								var nodes=myChart._chartsViews[0]._data._graphicEls;
								for(var i=0,count =nodes.length;i<count;i++){
									var node=nodes[i];
									if(node===undefined)
										continue;
									allNode++;
								}
								var height=window.innerHeight;
								var currentHeight=16*allNode;
								var newWidth=Math.max(currentHeight,height);
								// container.style.width = window.innerWidth + 'px';
								container.style.height = newWidth + 'px';
								myChart.resize();
								layer.close(index_load);
							}
						}
					});

				}
			</script>
		</section>
	</div>
</div>
</body>
</html>